﻿<html><head>
<title>Simple 3D on HTML5 canvas</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="processing.js"></script>
<script type="text/javascript">

function setup()
{


var fov = 250;

var SCREEN_WIDTH = 600; 
var SCREEN_HEIGHT = 300; 

var HALF_WIDTH = SCREEN_WIDTH/2; 
var HALF_HEIGHT = SCREEN_HEIGHT/2; 

var numPoints = 200; 


function draw3Din2D(point3d)
{  
	x3d = point3d[0];
	y3d = point3d[1]; 
	z3d = point3d[2]; 
	var scale = fov/(fov+z3d); 
	var x2d = (x3d * scale) + HALF_WIDTH;	
	var y2d = (y3d * scale)  + HALF_HEIGHT;
	
	
	c.lineWidth= scale; 
	c.strokeStyle = "rgb(255,255,255)"; 	
	c.beginPath();
	c.moveTo(x2d,y2d); 
	c.lineTo(x2d+scale,y2d); 
	c.stroke(); 
	
}

var canvas = document.getElementById('Canvas2D');
var c = canvas.getContext('2d');

var points = [];

function initPoints()
{
	for (i=0; i<numPoints; i++)
	{
		point = [(Math.random()*400)-200, (Math.random()*400)-200 , (Math.random()*400)-200 ];
		points.push(point); 
	}

}

function render() 
{

	c.fillStyle="rgb(0,0,0)";
  	c.fillRect(0,0, SCREEN_WIDTH, SCREEN_HEIGHT);
  	
	for (i=0; i<numPoints; i++)
	{
		point3d = points[i]; 
		rotatePointAroundY(point3d, 0.04); 	
		draw3Din2D(point3d); 

	}
}

function rotatePointAroundY(point3d, angle)
{
	x = point3d[0]; 
	z = point3d[2]; 
	
	cosRY = Math.cos(angle);
	sinRY = Math.sin(angle);
	tempz = z; 
	tempx = x; 

	
	x= (tempx*cosRY)+(tempz*sinRY);
	z= (tempx*-sinRY)+(tempz*cosRY);
	point3d[0] = x; 
	point3d[2] = z; 
}


initPoints();

var loop = setInterval(function(){render();}, 50);

}

</script>
<style type="text/css">body{background:#000;color:#fff;font-family:arial;font-size:90%;}.wrap{width:640px;margin:0 auto;}canvas{border:1px solid #0f0;}a{color:#0f0;}</style>
</head><body onload="setup();">
<div class="wrap">
<canvas id="Canvas2D" width="600" height="300">Internet Explorer Not Supported :(</canvas>
<h1>Simple 3D HTML5 Canvas</h1>
<p>By <a href="http://sebleedelisle.com">Seb Lee-Delisle</a></p>
<p>Simple 3D on HTML5 Canvas, as demoed at BarCampBrighton4. More info at <a href="http://www.sebleedelisle.com/2009/09/simple-3d-in-html5-canvas">sebleedelisle.com</a>. </p>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-809606-2";
urchinTracker();
</script>
</body></html>